import React, { Component, useCallback, useEffect, useRef } from "react";
import { Route, Link, useHistory } from 'react-router-dom'
import Date from './date.jsx'
import './css/index.css'
// 中间的搜索框
function Index() {
    let history = useHistory();
    const refInput: any = useRef(undefined);
    // 点击搜索的事件  并跳到更多详情页面
    function toDetailMore() {
        history.push({ pathname: "/detailmore", state: { keyCode: refInput.current.value } });
    }
    let InputEvent3 = useCallback(
        () => {
            // 搜索框的点击事件：实现把搜索框变长，同时显示下方的信息展示框
            // console.log(refInput.current.value, 666);

        }, []);
    // 节流
    function throttle(fn: any) {
        let canRun = true; // 通过闭包保存一个标记
        return function (e: any) {
            if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
            canRun = false; // 立即设置为 false
            setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中
                fn.apply(this, e);
                // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键)表示可以执行下一次循环
                canRun = true;
            }, 500);
        };
    }
    throttle(InputEvent3)

    return (
        <div className='MiddleSearchBox'>
            {/* 房源 */}
            <div className='houseSesources'>
                房源
                <span className='iconfont icon-xiangxia1 housejiantou'></span>
            </div>
            {/* 搜索框 */}
            <div className='SearchBox'>
                <span className='iconfont icon-weizhi'></span>
                <input onChange={InputEvent3} ref={refInput} className='SearchInput' type='search' placeholder='输入目的地、城市或景点' />
            </div>
            {/* 选择入住和退房日期 */}
            <div className='CheckInOut'>
                <Date />
            </div>
            {/* 搜索按钮 */}
            <div className='SearchButton' onClick={toDetailMore}>搜索</div>
        </div>
    )

}
export default Index;